<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级管理 - AI教学辅助系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/common.css" rel="stylesheet">
    <link href="css/admin.css" rel="stylesheet">
    <style>
        .action-buttons {
            display: flex;
            gap: 5px;
        }
        
        .btn-learning-progress {
            background-color: #17a2b8;
            color: white;
        }
        
        .btn-learning-progress:hover {
            background-color: #138496;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container my-4">
        <!-- 消息提示区 -->
        <div id="message-container"></div>
        
        <!-- 标题区 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>班级管理</h2>
            <button id="btn-add-class" class="btn btn-primary">
                <i class="fas fa-plus"></i> 添加班级
            </button>
        </div>
        
        <!-- 班级列表 -->
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-list"></i> 班级列表</h5>
            </div>
            <div class="card-body">
                <div id="no-class-data" class="alert alert-info" style="display: none;">
                    暂无班级数据
                </div>
                <table id="class-table" class="table table-striped">
                    <thead>
                        <tr>
                            <th width="10%">班级ID</th>
                            <th width="15%">班级名称</th>
                            <th width="10%">年级</th>
                            <th width="15%">班主任</th>
                            <th width="15%">学生数量</th>
                            <th width="15%">创建日期</th>
                            <th width="20%">操作</th>
                        </tr>
                    </thead>
                    <tbody id="class-tbody">
                        <!-- 班级数据将通过JS动态添加 -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 添加/编辑班级模态框 -->
        <div class="modal fade" id="class-modal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="class-modal-title">添加班级</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="class-form">
                            <input type="hidden" id="class-id-input">
                            
                            <div class="mb-3">
                                <label for="class-name-input" class="form-label">班级名称</label>
                                <input type="text" class="form-control" id="class-name-input" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="grade-input" class="form-label">年级</label>
                                <select class="form-select" id="grade-input" required>
                                    <option value="">选择年级</option>
                                    <option value="一年级">一年级</option>
                                    <option value="二年级">二年级</option>
                                    <option value="三年级">三年级</option>
                                    <option value="四年级">四年级</option>
                                    <option value="五年级">五年级</option>
                                    <option value="六年级">六年级</option>
                                    <option value="初一">初一</option>
                                    <option value="初二">初二</option>
                                    <option value="初三">初三</option>
                                    <option value="高一">高一</option>
                                    <option value="高二">高二</option>
                                    <option value="高三">高三</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="teacher-id-input" class="form-label">班主任</label>
                                <select class="form-select" id="teacher-id-input" required>
                                    <option value="">选择班主任</option>
                                    <!-- 教师列表将通过JS动态添加 -->
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="btn-save-class">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义脚本 -->
    <script src="js/admin-classes.js"></script>
    <script>
        $(document).ready(function() {
            // 初始化
            loadClassList();
            loadTeacherList();
            
            // 绑定事件
            $('#btn-add-class').click(function() {
                // 重置表单
                $('#class-form')[0].reset();
                $('#class-id-input').val('');
                $('#class-modal-title').text('添加班级');
                
                // 显示模态框
                const classModal = new bootstrap.Modal(document.getElementById('class-modal'));
                classModal.show();
            });
            
            // 保存班级
            $('#btn-save-class').click(function() {
                saveClass();
            });
            
            // 编辑班级
            $('#class-table').on('click', '.btn-edit-class', function() {
                const classId = $(this).data('class-id');
                editClass(classId);
            });
            
            // 删除班级
            $('#class-table').on('click', '.btn-delete-class', function() {
                const classId = $(this).data('class-id');
                if (confirm('确定要删除该班级吗？此操作不可恢复！')) {
                    deleteClass(classId);
                }
            });
            
            // 查看班级学习进度
            $('#class-table').on('click', '.btn-learning-progress', function() {
                const classId = $(this).data('class-id');
                window.location.href = `admin-class-progress.html?classId=${classId}`;
            });
        });
        
        // 加载班级列表
        function loadClassList() {
            $.ajax({
                url: '/api/admin/classes',
                type: 'GET',
                headers: {
                    'Authorization': localStorage.getItem('token')
                },
                success: function(data) {
                    renderClassList(data);
                },
                error: function(xhr) {
                    showMessage('获取班级列表失败: ' + getErrorMessage(xhr), 'error');
                }
            });
        }
        
        // 渲染班级列表
        function renderClassList(data) {
            const tbody = $('#class-tbody');
            tbody.empty();
            
            if (!data || !data.length) {
                $('#no-class-data').show();
                $('#class-table').hide();
                return;
            }
            
            $('#no-class-data').hide();
            $('#class-table').show();
            
            data.forEach(classInfo => {
                const row = `
                    <tr>
                        <td>${classInfo.classId}</td>
                        <td>${classInfo.className}</td>
                        <td>${classInfo.grade}</td>
                        <td>${classInfo.teacherName || '-'}</td>
                        <td>${classInfo.studentCount || 0}</td>
                        <td>${formatDate(classInfo.createTime)}</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-sm btn-primary btn-edit-class" data-class-id="${classInfo.classId}">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button class="btn btn-sm btn-danger btn-delete-class" data-class-id="${classInfo.classId}">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                                <button class="btn btn-sm btn-learning-progress" data-class-id="${classInfo.classId}">
                                    <i class="fas fa-chart-bar"></i> 学习进度
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
                tbody.append(row);
            });
        }
        
        // 加载教师列表
        function loadTeacherList() {
            $.ajax({
                url: '/api/admin/teachers',
                type: 'GET',
                headers: {
                    'Authorization': localStorage.getItem('token')
                },
                success: function(data) {
                    const teacherSelect = $('#teacher-id-input');
                    teacherSelect.find('option:not(:first)').remove();
                    
                    if (data && data.length) {
                        data.forEach(teacher => {
                            teacherSelect.append(`<option value="${teacher.teacherId}">${teacher.name}</option>`);
                        });
                    }
                },
                error: function(xhr) {
                    console.error('获取教师列表失败', xhr);
                }
            });
        }
        
        // 保存班级
        function saveClass() {
            const classId = $('#class-id-input').val();
            const className = $('#class-name-input').val();
            const grade = $('#grade-input').val();
            const teacherId = $('#teacher-id-input').val();
            
            if (!className || !grade) {
                showMessage('请填写完整的班级信息', 'error');
                return;
            }
            
            const classData = {
                className: className,
                grade: grade,
                teacherId: teacherId
            };
            
            if (classId) {
                classData.classId = classId;
            }
            
            $.ajax({
                url: '/api/admin/classes',
                type: 'POST',
                headers: {
                    'Authorization': localStorage.getItem('token'),
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify(classData),
                success: function(data) {
                    showMessage(classId ? '班级更新成功' : '班级添加成功');
                    
                    // 关闭模态框
                    bootstrap.Modal.getInstance(document.getElementById('class-modal')).hide();
                    
                    // 重新加载班级列表
                    loadClassList();
                },
                error: function(xhr) {
                    showMessage((classId ? '更新' : '添加') + '班级失败: ' + getErrorMessage(xhr), 'error');
                }
            });
        }
        
        // 编辑班级
        function editClass(classId) {
            $.ajax({
                url: `/api/admin/classes/${classId}`,
                type: 'GET',
                headers: {
                    'Authorization': localStorage.getItem('token')
                },
                success: function(data) {
                    // 填充表单
                    $('#class-id-input').val(data.classId);
                    $('#class-name-input').val(data.className);
                    $('#grade-input').val(data.grade);
                    $('#teacher-id-input').val(data.teacherId);
                    
                    // 更新模态框标题
                    $('#class-modal-title').text('编辑班级');
                    
                    // 显示模态框
                    const classModal = new bootstrap.Modal(document.getElementById('class-modal'));
                    classModal.show();
                },
                error: function(xhr) {
                    showMessage('获取班级信息失败: ' + getErrorMessage(xhr), 'error');
                }
            });
        }
        
        // 删除班级
        function deleteClass(classId) {
            $.ajax({
                url: `/api/admin/classes/${classId}`,
                type: 'DELETE',
                headers: {
                    'Authorization': localStorage.getItem('token')
                },
                success: function() {
                    showMessage('班级删除成功');
                    loadClassList();
                },
                error: function(xhr) {
                    showMessage('删除班级失败: ' + getErrorMessage(xhr), 'error');
                }
            });
        }
        
        // 显示消息
        function showMessage(message, type = 'success') {
            const alertClass = type === 'error' ? 'alert-danger' : 'alert-success';
            const messageHtml = `
                <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;
            
            $('#message-container').html(messageHtml);
            
            // 5秒后自动消失
            setTimeout(() => {
                $('.alert').alert('close');
            }, 5000);
        }
        
        // 获取错误消息
        function getErrorMessage(xhr) {
            if (xhr.responseJSON && xhr.responseJSON.message) {
                return xhr.responseJSON.message;
            }
            return xhr.statusText || '未知错误';
        }
        
        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '-';
            
            const date = new Date(dateString);
            return date.toLocaleDateString();
        }
    </script>
</body>
</html> 